// PickFace.js (c) 2012 matsuda and kanda
// Vertex shader program
let VSHADER_SOURCE =
  `attribute vec4 a_Position; 
  attribute vec4 a_Color; 
  attribute float a_Face;    // Surface number (Cannot use int for attribute variable)
  uniform mat4 u_MvpMatrix; 
  uniform int u_SelectedFaceId;  // Surface number of selected face
  varying vec4 v_Color; 
  void main() { 
    gl_Position = u_MvpMatrix * a_Position; 
    if (int(a_Face) == u_SelectedFaceId) {
      v_Color = vec4(1.0, 1.0, 1.0, 1.0);
    } else if (u_SelectedFaceId == 0) {
      v_Color = vec4(a_Color.rgb, a_Face / 255.0);
    } else {
      v_Color = a_Color;
    }
  }`;

// Fragment shader program
let FSHADER_SOURCE = `
  precision mediump float;

  varying vec3 v_Normal;
  varying vec3 v_Position;
  varying vec2 v_TexCoord;

  varying vec4 v_Color;

  //点光源
  uniform vec3 u_LightColor;
  uniform vec3 u_LightPosition;

  //环境光线
  uniform vec3 u_AmbientLight;
  uniform sampler2D u_Sampler;

  void main() {
    // vec3 lightDirection = normalize(u_LightPosition - v_Position);
    // float nDotL = max(dot(lightDirection, normalize(v_Normal)), 0.0);
    // vec3 diffuse = u_LightColor * v_Color.rgb * nDotL;
    // vec3 ambient = u_AmbientLight * v_Color.rgb;
    // gl_FragColor = vec4(diffuse + ambient + texture2D(u_Sampler, v_TexCoord).rgb, v_Color.a);
    gl_FragColor = v_Color;
  }
  `;

let ANGLE_STEP = 20.0; // Rotation angle (degrees/second)

function main() {
  // Retrieve <canvas> element
  let canvas = document.getElementById('webgl');

  // Get the rendering context for WebGL
  let gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  gl.program = createProgramByMe(gl, VSHADER_SOURCE, FSHADER_SOURCE);
  gl.useProgram(gl.program);

  // Set the vertex information
  let n = initVertexBuffers(gl);
  if (n < 0) {
    console.log('Failed to set the vertex information');
    return;
  }

  // Set the clear color and enable the depth test
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.enable(gl.DEPTH_TEST);

  // Get the storage locations of uniform variables
  let u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
  let u_SelectedFaceId = gl.getUniformLocation(gl.program, 'u_SelectedFaceId');
  if (!u_MvpMatrix || !u_SelectedFaceId) {
    console.log('Failed to get the storage location of uniform variable');
    return;
  }

  // Calculate the view projection matrix
  let viewProjMatrix = new Matrix4();
  viewProjMatrix.setPerspective(30.0, canvas.width / canvas.height, 1.0, 100.0);
  viewProjMatrix.lookAt(3.0, 3.0, 7.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

  // Initialize selected surface
  gl.uniform1i(u_SelectedFaceId, -1);

  let currentAngle = 0.0; // Current rotation angle
  // Register the event handler
  canvas.onmousedown = function (ev) { // Mouse is pressed
    let x = ev.clientX;
    let y = ev.clientY;
    let rect = ev.target.getBoundingClientRect();
    let x_in_canvas = x - rect.left;
    let y_in_canvas = rect.bottom - y;
    let face = checkFace(gl, n, x_in_canvas, y_in_canvas, currentAngle, u_SelectedFaceId, viewProjMatrix, u_MvpMatrix);
    gl.uniform1i(u_SelectedFaceId, face); // Pass the surface number to u_SelectedFaceId
    draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);
  };

  let tick = function () { // Start drawing
    currentAngle += 0.3;
    draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);
    requestAnimationFrame(tick);
  };
  tick();
}

function initVertexBuffers(gl) {
  // Create a cube
  //    v6----- v5
  //   /|      /|
  //  v1------v0|
  //  | |     | |
  //  | |v7---|-|v4
  //  |/      |/
  //  v2------v3

  let vertices = new Float32Array([ // Vertex coordinates
    1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, // v0-v1-v2-v3 front
    1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, // v0-v3-v4-v5 right
    1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
    -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, // v1-v6-v7-v2 left
    -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // v7-v4-v3-v2 down
    1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0 // v4-v7-v6-v5 back
  ]);

  let colors = new Float32Array([ // Colors
    0.32, 0.18, 0.56, 0.32, 0.18, 0.56, 0.32, 0.18, 0.56, 0.32, 0.18, 0.56, // v0-v1-v2-v3 front
    0.5, 0.41, 0.69, 0.5, 0.41, 0.69, 0.5, 0.41, 0.69, 0.5, 0.41, 0.69, // v0-v3-v4-v5 right
    0.78, 0.69, 0.84, 0.78, 0.69, 0.84, 0.78, 0.69, 0.84, 0.78, 0.69, 0.84, // v0-v5-v6-v1 up
    0.0, 0.32, 0.61, 0.0, 0.32, 0.61, 0.0, 0.32, 0.61, 0.0, 0.32, 0.61, // v1-v6-v7-v2 left
    0.27, 0.58, 0.82, 0.27, 0.58, 0.82, 0.27, 0.58, 0.82, 0.27, 0.58, 0.82, // v7-v4-v3-v2 down
    0.73, 0.82, 0.93, 0.73, 0.82, 0.93, 0.73, 0.82, 0.93, 0.73, 0.82, 0.93, // v4-v7-v6-v5 back
  ]);

  let faces = new Uint8Array([ // Faces
    1, 1, 1, 1, // v0-v1-v2-v3 front
    2, 2, 2, 2, // v0-v3-v4-v5 right
    3, 3, 3, 3, // v0-v5-v6-v1 up
    4, 4, 4, 4, // v1-v6-v7-v2 left
    5, 5, 5, 5, // v7-v4-v3-v2 down
    6, 6, 6, 6, // v4-v7-v6-v5 back
  ]);

  let indices = new Uint8Array([ // Indices of the vertices
    0, 1, 2, 0, 2, 3, // front
    4, 5, 6, 4, 6, 7, // right
    8, 9, 10, 8, 10, 11, // up
    12, 13, 14, 12, 14, 15, // left
    16, 17, 18, 16, 18, 19, // down
    20, 21, 22, 20, 22, 23 // back
  ]);

  // Create a buffer object
  let indexBuffer = gl.createBuffer();
  if (!indexBuffer) {
    return -1;
  }

  // Write vertex information to buffer object
  if (!initArrayBuffer(gl, vertices, gl.FLOAT, 3, 'a_Position')) return -1; // Coordinates Information
  if (!initArrayBuffer(gl, colors, gl.FLOAT, 3, 'a_Color')) return -1; // Color Information
  if (!initArrayBuffer(gl, faces, gl.UNSIGNED_BYTE, 1, 'a_Face')) return -1; // Surface Information

  // Unbind the buffer object
  // gl.bindBuffer(gl.ARRAY_BUFFER, null);

  // Write the indices to the buffer object
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

  return indices.length;
}

function checkFace(gl, n, x, y, currentAngle, u_SelectedFaceId, viewProjMatrix, u_MvpMatrix) {
  let pixels = new Uint8Array(4); // Array for storing the pixel value
  gl.uniform1i(u_SelectedFaceId, 0); // Draw by writing surface number into alpha value
  draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);
  // Read the pixel value of the clicked position. pixels[3] is the surface number
  gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

  return pixels[3];
}

let g_MvpMatrix = new Matrix4(); // Model view projection matrix
function draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix) {
  // Caliculate The model view projection matrix and pass it to u_MvpMatrix
  g_MvpMatrix.set(viewProjMatrix);
  g_MvpMatrix.rotate(currentAngle, 1.0, 0.0, 0.0); // Rotate appropriately
  // g_MvpMatrix.rotate(currentAngle, 0.0, 1.0, 0.0);
  // g_MvpMatrix.rotate(currentAngle, 0.0, 0.0, 1.0);
  gl.uniformMatrix4fv(u_MvpMatrix, false, g_MvpMatrix.elements);

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear buffers
  gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); // Draw
}

// let last = Date.now();  // Last time that this function was called
// function animate(angle) {
//   let now = Date.now(); // Calculate the elapsed time
//   let elapsed = now - last;
//   last = now;
//   // Update the current rotation angle (adjusted by the elapsed time)
//   let newAngle = angle + 0.3;
//   return newAngle % 360;
// }

function initArrayBuffer(gl, data, type, num, attribute) {
  // Create a buffer object
  let buffer = gl.createBuffer();
  if (!buffer) {
    console.log('Failed to create the buffer object');
    return false;
  }
  // Write date into the buffer object
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
  // Assign the buffer object to the attribute variable
  let a_attribute = gl.getAttribLocation(gl.program, attribute);
  if (a_attribute < 0) {
    console.log('Failed to get the storage location of ' + attribute);
    return false;
  }
  gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
  // Enable the assignment to a_attribute variable
  gl.enableVertexAttribArray(a_attribute);

  return true;
}


const loadShaderByMe = (gl, type, sourceCode) => {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, sourceCode);
  gl.compileShader(shader);
  let compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (!compiled) {
    let error = gl.getShaderInfoLog(shader);
    console.log('Failed to compile shader: ' + error);
    gl.deleteShader(shader);
    return null;
  }

  return shader;
};

const createProgramByMe = (gl, v_shader_source, f_shader_source) => {
  const program = gl.createProgram();
  gl.attachShader(program, loadShaderByMe(gl, gl.VERTEX_SHADER, v_shader_source));
  gl.attachShader(program, loadShaderByMe(gl, gl.FRAGMENT_SHADER, f_shader_source));
  gl.linkProgram(program);
  let linked = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (!linked) {
    console.log(gl.getProgramInfoLog(program));
  }

  return program;
};